<template>
  <el-dialog title="收货地址" :visible="dialogTableVisible" width="400px" :before-close="handleClose">
    <el-form :model="form" label-width="80px" ref="form" :rules="rules">

      <!-- 1. -->
      <el-form-item label="学科名称" prop='subjectName'>
        <el-input v-model="form.subjectName" placeholder="请输入学科名称"></el-input>
      </el-form-item>

      <!-- 2. -->
      <el-form-item label="是否显示">
        <el-switch v-model="form.isFrontDisplay"></el-switch>
      </el-form-item>

      <!-- 3. 按钮-->
      <el-form-item class="chuang">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// 添加api
import { add, update } from '@/api/hmmm/subjects.js'
export default {
  props: {
    // 父组件传来布尔值控制对话框显示隐藏
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    // 编辑状态传来当前项的数据
    subjectName: {
      type: Object
    }
  },
  watch: {
    subjectName: {
      handler: function (newVal) {
        this.form.subjectName = newVal.name
        this.form.isFrontDisplay = newVal.Bool
        this.one = newVal.id
      },
      deep: true

    }
  },
  data () {
    return {
      one: '', // 修改状态项的id
      // dialogTableVisible: false, // 弹框的显示隐藏
      // 弹框的绑定数据
      form: {
        subjectName: '',
        isFrontDisplay: false
      },
      // 验证规则
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 确认按钮
    async onSubmit () {
      this.$refs.form.validate()// 验证
      if (this.subjectName.state === 1) {
        // 新增功能
        try {
          // console.log('开始进行新增操作')
          const aa = await add(this.form) // 新增请求
          console.log(aa)
          this.$parent.getDetail() // 刷新页面
          this.$message.success('操作成功')
          this.onDel() // 清空form
        } catch (error) {
          console.log(error)
        }
      } else {
        // 修改功能
        // console.log('开始进行修改操作')
        try {
          // 修改请求
          await update({ id: this.one, subjectName: this.form.subjectName, isFrontDisplay: this.form.isFrontDisplay })
          await this.$parent.getDetail() // 刷新页面
          this.$message.success('操作成功')
          this.onDel() // 清空form
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 取消按钮
    onCancel () {
      this.onDel()
    },
    // 清空form弹框数据
    onDel () {
      this.$refs.form.resetFields()
      this.$emit('update:dialogTableVisible')
      this.form.subjectName = ''
      this.form.isFrontDisplay = false
    },
    // 弹框关闭时（点击x和整流罩关闭时触发）
    handleClose () {
      this.$emit('update:dialogTableVisible')
      this.$emit('gai', {
        name: '', // 回显弹框中的username
        Bool: false, // 回显弹框中的radio
        state: 1, // 判断是添加状态还是修改状态
        id: '' // 修改项的id
      })
    }
  }
}
</script>
<style scoped >
.chuang {
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
</style>
